import 'package:eh_mobile/common/utils/extension.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';

import '../../../common/values/svg_image.dart';
import 'index.dart';

class DeviceNamePage extends GetView<DeviceNameController> {
  const DeviceNamePage({Key? key}) : super(key: key);

  // 主视图
  Widget _buildView(BuildContext context) {
    //只弹一次键盘
    if (!controller.keyboardShow) {
      FocusScope.of(context).requestFocus(controller.inputFocusNode);
      controller.keyboardShow = true;
    }

    return _buildTopTextField();
  }

  //创建输入框
  Widget _buildTopTextField() {
    return Container(
        margin: const EdgeInsets.fromLTRB(12, 12, 12, 0).r,
        padding: const EdgeInsets.all(20).r,
        height: 60.r,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: const Color.fromRGBO(222, 222, 222, 0.15),
          borderRadius: BorderRadius.circular(15),
        ),
        clipBehavior: Clip.antiAlias,
        child: Row(
          children: [
            Expanded(
              child: TextField(
                style: 16
                    .ts
                    .copyWith(color: const Color.fromRGBO(238, 238, 238, 1)),
                maxLines: 1,
                controller: controller.inputController,
                focusNode: controller.inputFocusNode,
                textInputAction: TextInputAction.done,
                decoration: InputDecoration(
                  hintText: Get.arguments,
                  isCollapsed: true, //高度包裹
                  // contentPadding: const EdgeInsets.symmetric(
                  //     horizontal: 8, vertical: 8), //内容内边距，影响高度
                  border: InputBorder.none,
                ),
                textAlign: TextAlign.left,
                onSubmitted: (value) {
                  //提交按钮点击回调
                  controller.submitClick();
                },
                onEditingComplete: () {
                  // 输入完成回调
                },
                onChanged: (value) {
                  if (value.isNotEmpty && controller.hiddenClearButton) {
                    controller.hiddenClearButton = false;

                    controller.update(["device_name"]);
                  } else if (value.isEmpty &&
                      controller.hiddenClearButton == false) {
                    controller.hiddenClearButton = true;
                    controller.update(["device_name"]);
                  }
                },
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 8).r,
              child: SvgPicture.asset(
                SVGImage.inputIcCloseSvg,
                width: 22.r,
                height: 22.r,
              ),
            ).onClick(() {
              controller.inputController.clear();
              controller.hiddenClearButton = true;
              controller.update(["device_name"]);
            }).hidden(controller.hiddenClearButton),
          ],
        ));
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<DeviceNameController>(
      init: DeviceNameController(),
      id: "device_name",
      builder: (_) {
        return Scaffold(
          appBar: AppBar(
              title: const Text("设备名称"),
              automaticallyImplyLeading: false, //隐藏返回按钮
              leadingWidth: 70.r,
              leading: UnconstrainedBox(
                child: Container(
                  width: 42.r,
                  height: 32.r,
                  padding: const EdgeInsets.fromLTRB(0, 4, 0, 4).r,
                  decoration: BoxDecoration(
                    color: const Color.fromRGBO(222, 222, 222, 0.1),
                    borderRadius: BorderRadius.circular(16.r),
                  ),
                  child: SvgPicture.asset(
                    SVGImage.icReturnSvg,
                    // fit: BoxFit.contain,
                    color: Colors.white,
                  ),
                ).onClick(() {
                  controller.inputFocusNode.unfocus();
                  Get.back();
                }),
              ),
              actions: [
                UnconstrainedBox(
                  child: Container(
                    width: 42.r,
                    height: 32.r,
                    margin: EdgeInsets.only(right: 14.r),
                    padding: const EdgeInsets.fromLTRB(0, 2, 0, 2).r,
                    decoration: BoxDecoration(
                      color: const Color.fromRGBO(222, 222, 222, 0.1),
                      borderRadius: BorderRadius.circular(16.r),
                    ),
                    child: SvgPicture.asset(
                      SVGImage.icOkSvg,
                      // fit: BoxFit.contain,
                      color: Colors.white,
                    ),
                  ).onClick(() {
                    controller.submitClick();
                  }),
                )
              ]),
          body: SafeArea(
            child: _buildView(context),
          ),
        );
      },
    );
  }
}
